<div class="form-layout">
  <div class="form-wrap">
    <form class="form-horizontal" [formGroup]="profileForm">
      <div class="form-group">
        <label for="firstName" class="col-sm-5 control-label">First Name:</label>
        <div class="col-sm-7">
          <input type="text" class="form-control" id="firstName" placeholder="First Name" formControlName="firstName">
        </div>
      </div>

      <div class="form-group">
        <label for="lastName" class="col-sm-5 control-label">Last Name:</label>
        <div class="col-sm-7">
          <input type="text" class="form-control" id="lastName" placeholder="Last Name" formControlName="lastName">
        </div>
      </div>

      <div formGroupName="address">
        <h4>Address（嵌套FormGroup）</h4>

        <div class="form-group">
          <label for="street" class="col-sm-5 control-label">street:</label>
          <div class="col-sm-7">
            <input type="text" class="form-control" id="street" placeholder="street" formControlName="street">
          </div>
        </div>

        <div class="form-group">
          <label for="city" class="col-sm-5 control-label">city:</label>
          <div class="col-sm-7">
            <input type="text" class="form-control" id="city" placeholder="city" formControlName="city">
          </div>
        </div>

        <div class="form-group">
          <label for="state" class="col-sm-5 control-label">state:</label>
          <div class="col-sm-7">
            <input type="text" class="form-control" id="state" placeholder="state" formControlName="state">
          </div>
        </div>
      </div>

      <div formGroupName="information">
        <h4>Information（禁用FormGroup）</h4>

        <div class="form-group">
          <label for="height" class="col-sm-5 control-label">height:</label>
          <div class="col-sm-7">
            <input type="text" class="form-control" id="height" placeholder="身高" formControlName="height">
          </div>
        </div>

        <div class="form-group">
          <label for="age" class="col-sm-5 control-label">age:</label>
          <div class="col-sm-7">
            <input type="text" class="form-control" id="age" placeholder="年龄" formControlName="age">
          </div>
        </div>

        <div class="form-group">
          <label for="gender" class="col-sm-5 control-label">gender:</label>
          <div class="col-sm-7">
            <input type="text" class="form-control" id="gender" placeholder="性别" formControlName="gender">
          </div>
        </div>
      </div>

      <div formArrayName="aliases">
        <div class="form-array">
          <span>Aliases（FormArray）</span>
          <button class="btn btn-default" (click)="addAlias()">Add Alias</button>
        </div>

        <ng-container *ngFor="let alias of aliases.controls; let i=index">
          <div class="form-group">
            <label for="Alias{{i}}" class="col-sm-5 control-label">Alias{{i}}:</label>
            <div class="col-sm-7">
              <input type="text" class="form-control" id="Alias{{i}}" placeholder="Alias{{i}}" [formControlName]="i">
            </div>
          </div>
        </ng-container>
      </div>

      <!--  <button class="btn btn-primary" type="submit" [disabled]="!profileForm.valid">Submit</button>-->
    </form>
  </div>

  <div class="selected-wrap">
    <form>
      <div class="form-group">
        <label>请选择FormGroup</label>
        <nz-select
          nzAllowClear
          nzPlaceHolder="FormGroup"
          name="formGroup"
          [(ngModel)]="selectedFormStr.formGroup"
          (ngModelChange)="handleFormGroupChange($event)"
        >
          <nz-option *ngFor="let group of dropdownDataList['formGroup']" nzValue="{{group}}" nzLabel="{{group}}"></nz-option>
        </nz-select>
      </div>
      <div class="form-group">
        <label>请选择FormControl</label>
        <nz-tree-select
          name="formControl"
          [nzNodes]="dropdownDataList['formControl']"
          [nzExpandedKeys]="expandKeys"
          nzPlaceHolder="FormControl"
          [(ngModel)]="selectedFormStr.formControl"
          (ngModelChange)="handleFormControlChange($event)"
        >
        </nz-tree-select>
      </div>
    </form>
  </div>

  <div class="feature-wrap">
    <div class="attr-list">
      <h4>属性列表</h4>
      <div class="btn-wrap">
        <button class="btn btn-info" (click)="getFormGroupValue()">FormGroup的value值</button>
        <button class="btn btn-info" (click)="getFormControlValue()">FormControl的value值</button>
        <button class="btn btn-info" (click)="getFormArrayValue()">FormArray的value值</button>
<!--        <button class="btn btn-info">同步函数</button>-->
<!--        <button class="btn btn-info">异步函数</button>-->
        <button class="btn btn-info" (click)="getParentControl()">获取FormControl父控件</button>
        <button class="btn btn-info" (click)="getFormControlValidator()">获取FormControl同步校验器</button>
        <button class="btn btn-info" (click)="getFormGroupValid()">获取FormGroup的valid值</button>
        <button class="btn btn-info" (click)="getFormControlValid()">获取FormControl的valid值</button>
        <button class="btn btn-info" (click)="getFormGroupInValid()">获取FormGroup的invalid值</button>
        <button class="btn btn-info" (click)="getFormControlInValid()">获取FormControl的invalid值</button>
<!--        <button class="btn btn-info">控件是否无效</button>-->
<!--        <button class="btn btn-info">控件是否启用</button>-->
<!--        <button class="btn btn-info">控件是否禁用</button>-->
      </div>
      <div class="result">
        <p>属性输出值</p>
        <textarea class="form-control" rows="3" [(ngModel)]="attrOutput"></textarea>
      </div>
    </div>

    <div class="method-list">
      <h4>方法列表</h4>
      <div class="btn-wrap">
        <div class="input-group">
          <span class="input-group-btn">
            <button class="btn btn-info" type="button" (click)="setFormControlValidators(formControlRegExp.value)">设置FormControl同步校验器</button>
          </span>
          <input type="text" class="form-control" placeholder="请输入正则表达式，例如/胡教头/i" #formControlRegExp>
        </div>
        <div class="input-group">
          <span class="input-group-btn">
            <button class="btn btn-info" type="button" (click)="setFormControlValue(formControlValue.value)">设置FormControl的value值</button>
          </span>
          <input type="text" class="form-control" placeholder="请设置该控件的值" #formControlValue>
        </div>
<!--        <button class="btn btn-info" (click)="setFormGroupValidators()">设置FormGroup同步校验器</button>-->
<!--        <button class="btn btn-info" (click)="setFormControlValidators('/sowhat/i')">设置FormControl同步校验器</button>-->
<!--        <button class="btn btn-info">设置异步校验器</button>-->
<!--        <button class="btn btn-info">清空同步校验器</button>-->
<!--        <button class="btn btn-info">清空异步校验器</button>-->
<!--        <button class="btn btn-info">禁用控件</button>-->
<!--        <button class="btn btn-info">启用控件</button>-->
<!--        <button class="btn btn-info">设置父控件</button>-->
<!--        <button class="btn btn-info">设置控件值</button>-->
<!--        <button class="btn btn-info">修补控件值</button>-->
<!--        <button class="btn btn-info">重置控件</button>-->
      </div>
      <div class="result">
        <p>方法返回值</p>
        <textarea class="form-control" rows="3" [(ngModel)]="methodOutput"></textarea>
      </div>
    </div>
  </div>
</div>
